<!-- 
 * @Description:
 * @Date: 2024-06-25 21:24:10
 * @LastEditTime: 2024-07-31 16:04:14
-->
<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '轮播详情',
  },
}
</route>
<template>
  <view class="bg-#fff overflow-auto w-100% h-screen box-border p-20rpx">
    <view class="tobe-title mt-30rpx">{{ detailList.topic }}</view>
    <view class="flex items-center justify-between">
      <view class="tobe-time mb-12rpx">
        {{ formatTime(detailList.createTime, 'yyyy-MM-dd HH:mm:ss') }}
      </view>
      <view class="tobe-time">
        来源：{{ detailList.contentSource ? detailList.contentSource : '无' }}
      </view>
    </view>
    <view class="tobe-line"></view>
    <view v-html="detailList.content"></view>
  </view>
</template>

<script lang="ts" setup>
import { getBannerDetails } from '@/service/index/index'
import { formatTime, updateImageUrls } from '@/utils/index'
const detailList = ref({})
// 获取资讯详情
onLoad(async (options) => {
  const data: any = await getBannerDetails(Number(options.id))
  detailList.value = data.data
  detailList.value.content = updateImageUrls(detailList.value.content)
})
</script>
<style lang="scss">
::v-deep .wd-button.is-plain.is-primary {
  font-size: 28rpx !important;
  color: #e62929 !important;
  border-color: #e62929 !important;
}
.tobe-line {
  margin: 24rpx 0;
  border-bottom: 2rpx solid #ccc;
}
.tobe-title {
  margin-bottom: 28rpx;
  font-size: 18px;
  line-height: 25px;
  color: rgba(27, 27, 27, 1);
  text-align: justify;
}
.tobe-time {
  font-size: 16px;
  line-height: 20px;
  color: rgba(113, 113, 113, 1);
  text-align: justify;
}
rich-text {
  line-height: 1.7;
}
</style>
